<template>
  <h3 class="box-title">{{ res.title }}</h3>
  <div class="box-content">{{ res.content }}</div>
  <el-button>elemenui组件的按钮</el-button>
  <img src="../assets/images/1.png" alt="分镜" sizes="100%" class="img-responsive"/>
</template>

<script lang='ts' setup>
import { computed, onMounted, onUnmounted, toRefs } from 'vue';
import { onBeforeRouteLeave, onBeforeRouteUpdate, useRoute } from 'vue-router';

const route = useRoute()
const { params, path, query } = toRefs(route);
const res = computed(() => {
  return !!params.value.id ? params.value : query.value
});

console.log('params ', params.value);
console.log('query ', query.value);
console.log('path ', path.value);

//通过 props 传递参数
const props = defineProps(['id', 'title', 'content'])
console.log(props);

onUnmounted(() => {
  console.log('Detail组件销毁')
})

onMounted(() => {
  console.log(params.value, path.value, query.value);

})

onBeforeRouteLeave(() => {
  console.log('离开页面')
})
onBeforeRouteUpdate(() => {
  console.log('更新页面')
})
</script>

<style scoped lang='scss'>
.box-title {
  padding: 10px;
  text-align: center;
}

.box-content {
  text-indent: 2em;
  font-size: 14px;
  color: #1a1a1a;
  line-height: 30px;
}
</style>
